<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加空气质量信息</title>
    <link rel="stylesheet" href="static/css/layui.css">
</head>
<body>
<form class="layui-form" action="">
    <!--    下拉列表展示区域-->
    <div class="layui-form-item">
        <label class="layui-form-label">检测区域</label>
        <div class="layui-input-block">
                <select name="districtId" id="district">
                </select>
            </div>
        </div>
    </div>
    <!--    输入检测时间-->
    <div class="layui-form-item">
        <label class="layui-form-label">检测时间</label>
        <div class="layui-input-block">
            <input type="text" name="monitorTime" id="monitorTime" autocomplete="off" placeholder="请输入检测时间"
                   class="layui-input">
        </div>
    </div>
    <!--    PM10的值-->
    <div class="layui-form-item">
        <label class="layui-form-label">PM10</label>
        <div class="layui-input-block">
            <input type="number" name="pm10" id="pm10" autocomplete="off" placeholder="请输入PM10"
                   class="layui-input">
        </div>
    </div>
    <!--    PM2.5的值-->
    <div class="layui-form-item">
        <label class="layui-form-label">PM2.5</label>
        <div class="layui-input-block">
            <input type="number" name="pm25" id="pm25" autocomplete="off" placeholder="请输入PM2.5"
                   class="layui-input">
        </div>
    </div>
    <!--    监测站-->
    <div class="layui-form-item">
        <label class="layui-form-label">监测站</label>
        <div class="layui-input-block">
            <input type="text" name="monitoringStation" id="monitoringStation" autocomplete="off" placeholder="请输入监测站"
                   class="layui-input">
        </div>
    </div>
    <!--    提交按钮-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="airAdd">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id="closeBtn" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<script src="static/layui.js"></script>
<script>
    layui.use(['form','laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate;

        // 将检测时间初始化为选择时间的组件
        laydate.render({
            elem: '#monitorTime' //指定元素
        });

        // 发送ajax请求获取区域数据，填充到district下拉列表
        $.ajax({
            url: "http://localhost:8080/district/list",
            data: null,
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    var jsonArray = res.data;
                    var content = "<option value='0'>请选择区域</option>";
                    for (var i = 0; i < jsonArray.length; i++) {
                        content += "<option value='" + jsonArray[i].id + "'>" + jsonArray[i].name + "</option>";
                    }
                    // 插入到下拉列表的标签体内
                    $("#district").html(content);
                    // 重新渲染form
                    form.render('select');

                } else {
                    // 凉凉~~
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg("凉凉~~");
            }
        });

        // 监听form的submit事件，阻止表单正常提交
        form.on('submit(airAdd)', function(data){
            // 收集请求参数
            var parameters = data.field;

            // 发送ajax请求
            $.ajax({
                url: "http://localhost:8080/air/add",
                data: parameters,
                type: "POST",
                dataType: "json",
                success: function(res){
                    if(res.code == 0){
                        layer.msg("添加空气质量信息成功");
                        // 关闭当前弹出层
                        setTimeout(function(){
                            // 需要采用HTTP协议才能访问，本地协议凉凉~~~
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index); //再执行关闭
                        },1000);
                    }else{
                        layer.msg(res.msg);
                    }
                },
                error: function(){
                    layer.msg("服务器爆炸，请稍后再试！")
                }
            });


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        // 给关闭按钮绑定单击事件
        $("#closeBtn").click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index); //再执行关闭
        });
    });

</script>
</body>
</html>